<template>
  <div class="adtest">
    <div class="container">
      <div class="top">
        <div class="town">
          <box-component title="当日各乡镇采集情况" bgbox="true">
            <template #content>
              <div class="tow-box" style="height: 100%; font-size: 14px; overflow: auto" id="">
                <div class="town-item" v-for="(item, index) in townList" :key="index">
                  <span class="no">{{ index + 1 }}</span>
                  <img src="@/assets/town.png" />
                  <div class="towm-desc">
                    <span>乡镇</span>
                    <div class="town-name">{{ item.town }}</div>
                  </div>
                  <div class="town-info">
                    <div class="town-info-item">
                      <span class="circles"></span>
                      <span class="town-content">
                        应采：<text>{{ item.allPersons }}</text>人
                      </span>
                    </div>
                    <div class="town-info-item">
                      <span class="circles"></span>
                      <span class="town-content">
                        已采：<text>{{ item.reals }}</text>人
                      </span>
                    </div>
                    <div class="town-info-item">
                      <span class="circles"></span>
                      <span class="town-content">
                        未采：<text>{{ item.notTest }}</text>人
                      </span>
                    </div>
                    <div class="town-info-item">
                      <span class="circles"></span>
                      <span class="town-content">
                        检测率：<text>{{ item.rate }}</text>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </box-component>
        </div>
        <div class="map">
          <div class="tongji-box">
            <div class="tongji">
              <div class="date">
                <img src="@/assets/rili.png" />
                <text>统计截止日期：{{ townData.startDate }}</text>
              </div>
              <div class="tongji-info">
                <div class="tongji-info-item">
                  <div class="tongji-icon">应检</div>
                  <div class="tongji-count">
                    {{ townData.allPersons }}
                    <text>人</text>
                  </div>
                </div>
                <div class="tongji-info-item">
                  <div class="tongji-icon">已检</div>
                  <div class="tongji-count">
                    {{ townData.reals }}
                    <text>人</text>
                  </div>
                </div>
                <div class="tongji-info-item">
                  <div class="tongji-icon">未检</div>
                  <div class="tongji-count">
                    {{ townData.notTest }}
                    <text>人</text>
                  </div>
                </div>
                <div class="tongji-info-item">
                  <div class="tongji-icon">检测率</div>
                  <div class="tongji-count">
                    {{ townData.rate }}
                    <text>%</text>
                  </div>
                </div>
              </div>
            </div>
            <div class="map-box">
              <div id="leaflet-map" ref="mapContainer"></div>
              <div class="modal">
                <div class="modal-box">
                  <div class="modal-item">
                    <img src="@/assets/n1.png" />
                    <span>乡镇：{{ currentClickTownData?.town?currentClickTownData.town:'--' }}</span>
                  </div>
                  <div class="modal-item">
                    <img src="@/assets/n2.png" />
                    <span>应采：<text>{{ currentClickTownData?.allPersons?currentClickTownData.allPersons:0 }}</text>人</span>
                  </div>
                  <div class="modal-item">
                    <img src="@/assets/n3.png" />
                    <span>实采：<text>{{ currentClickTownData?.reals?currentClickTownData.reals:0 }}</text>人</span>
                  </div>
                  <div class="modal-item">
                    <img src="@/assets/n4.png" />
                    <span>未采：<text>{{ currentClickTownData?.notTest?currentClickTownData.notTest:0 }}</text>人</span>
                  </div>
                  <div class="modal-item">
                    <img src="@/assets/n5.png" />
                    <span>检测率：<text>{{ currentClickTownData?.rate?currentClickTownData.rate:100 }}</text>%</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="mas-neg">
          <div class="mas">
            <box-component title="阳性数据统计">
              <template #content>
                <div class="line" style="font-size: 14px; font-weight:600;">
                  <div style="flex: 0.5">序号</div>
                  <div style="flex: 1">乡镇名称</div>
                  <div style="flex: 0.8">确认/无症状</div>
                  <div style="flex: 0.8">隔离管控</div>
                  <div style="flex: 0.8">重点人群</div>
                  <div style="flex: 0.8">返乡人数</div>
                  <div style="flex: 0.8">社会筛查</div>
                </div>
                <div style="height: 80%; font-size: 14px; overflow: auto" id="tableList2">
                  <div
                    :class="{ line: true, lineColor: index % 2 === 1 }"
                    v-for="(item, index) in tableData"
                    :key="index"
                    ref="tableRef"
                  >
                    <div style="flex: 0.5" class="circle-box">
                      <div class="circle">{{ index + 1 }}</div>
                    </div>
                    <div style="flex: 1">{{ item.placeName }}</div>
                    <div style="flex: 0.8">{{ item.placeType }}</div>
                    <div style="flex: 0.8; color: #00EAFF">{{ item.total }}</div>
                    <div style="flex: 0.8; color: #FFD200">{{ item.yellows }}</div>
                    <div style="flex: 0.8; color: #F95352">{{ item.reds }}</div>
                    <div style="flex: 0.8; color: #F95352">{{ item.reds }}</div>
                  </div>
                </div>
              </template>
            </box-component>
          </div>
          <div class="neg">
            <box-component title="复阳人员详情">
              <template #content>
                <div class="line" style="font-size: 14px; font-weight:600;">
                  <div style="flex: 0.5">序号</div>
                  <div style="flex: 1">姓名</div>
                  <div style="flex: 0.8">年龄</div>
                  <div style="flex: 0.8">家庭住址</div>
                  <div style="flex: 0.8">核酸结果</div>
                  <div style="flex: 0.8">检测时间</div>
                </div>
              </template>
            </box-component>
          </div>
        </div>
      </div>
      <div class="bottom">
        <box-component title="风险预警" theight="23">
          <template #content>
            <div class="line" style="font-size: 14px; font-weight:600;">
              <div style="flex: 0.5">序号</div>
              <div style="flex: 0.5">乡镇名称</div>
              <div style="flex: 1">返乡报备人员未做核酸人数</div>
              <div style="flex: 1">重点人员三天未做核酸人数</div>
              <div style="flex: 1">重点人员五天未做核酸人数</div>
              <div style="flex: 1">发热门诊七天内未做核酸人</div>
              <div style="flex: 1">集中或居家隔离人员有混采记录</div>
              <div style="flex: 1">集中或居家隔离人员有扫码记录</div>
            </div>
          </template>
        </box-component>
      </div>
    </div>
  </div>
</template>

<script>
import 'leaflet/dist/leaflet.css';
import L from "leaflet";
import request from "../../utils/request.js";
import BoxComponent from '@/components/boxComponent.vue'
export default {
  components: {
    BoxComponent,
  },
  data() {
    return {
      // 表格数据
      tableData: [
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
      ],
      // 当日各乡镇数据
      townList: [],
      // 全县数据
      townData: '',
      // 通过地图点击的乡镇数据
      currentClickTownData: null,
    }
  },
  mounted() {
    this.autoScroll();
    this.init();

    // 获取 当日各乡镇采集情况 数据
    this.getTownList();

    // 全县数据采集情况
    this.getTownData();

  },
  methods: {
    // 获取 当日各乡镇采集情况 数据
    getTownList() {
      request.get("/api/hs/hsState", {
        params: {
          days: 1
        }
      }).then((res) => {
        console.log(res);
        if(res.data.status == 200) {
          this.townList = res.data.data;
        }
      });
    },
    // 全县数据采集情况
    getTownData() {
      request.get("/api/hs/getHsTotal").then((res) => {
        console.log(0, res);
        if (res.data.status == 200) {
          this.townData = res.data.data;
        }
      });
    },
    // 根据行政区代码获取对应数据
    getDataByCode(code) {
      let _this = this;
      let arr = this.townList;
      let json;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].areaCode == code) {
          json = arr[i];
        }
      }
      if (json) {
        _this.currentClickTownData = json;
      } else {
        _this.currentClickTownData = null;
      }
    },
    // 地图初始化
    init() {
      let me = this;
      //加载区县GEO-JSON
      request.get("/api/geo/selectByAreaCode").then((resp) => {
        let geojson = resp.data.data;
        me.initMap(geojson); //初始化地图
        // me.loadCameras('');
      });
    },
    initMap(geojson) {
      let _this = this;
      //中心点
      let center = [geojson[0].centerLat, geojson[0].centerLon];
      //创建地图
      this.map = L.map('leaflet-map', {
        center: center, //中心点
        zoom: this.getZoom(), //初始放大系数
        crs: L.CRS.EPSG4326 //wsg84坐标系
      });
      //地区图层组
      let areaLayer = L.layerGroup();
      this.map.addLayer(areaLayer);
      //区县
      for (let i = 1; i < geojson.length; i++) {
        let geoObject = JSON.parse(geojson[i].geoJson); //服务端返回的是字符串JSON，转换为对象
        //创建一个geoJSON图层加入到地区图层组
        let layer = L.geoJSON(geoObject, {
          onEachFeature: function (feature, layer) {
            layer.options.color = '#A2EEFF' //边框颜色
            layer.options.weight = 1 //边框宽度
            layer.options.fillColor = '#42DFFC'; //填充色
            layer.options.fillOpacity = 0.4;//半透明
          }
        });
        //将当前区县加入区县图层组
        areaLayer.addLayer(layer);

        //////////////////////////////////////
        //在地图上做标记，因为标记有特殊背景，因此使用DivIcon
        //////////////////////////////////////
        //地图标记的标注图标
        let icon = L.divIcon({
          className: 'marker-div-icon',
          html: geojson[i].name,
          iconAnchor: [60, 50] //偏移量，尽量调整到区县的中间
        });
        //标记的坐标
        let markerPos = [geojson[i].centerLat, geojson[i].centerLon];
        //创建标记，加入地图，绑定事件
        L.marker(markerPos, {
          icon: icon,
          riseOnHover: true,
        }).addTo(this.map)
          .on('click', function () {//Marker事件
            console.log(geojson[i]);
            // alert('行政区划代码' + geojson[i].areaCode)
            // 获取当前点击行政区数据
            _this.getDataByCode(geojson[i].areaCode);
          });
      }
    },
    loadCameras(areaCode) {
      if (!this.map) { //地图未初始化
        return;
      }
      //用于存放视频设备图标的图层组
      if (!this.cameraLayers) {
        this.cameraLayers = L.layerGroup().addTo(this.map);
      } else {
        this.cameraLayers.removeAll();//如果已经有设备图标，则清空
      }

      //图标
      let cameraIcon =  L.icon({
        iconUrl: '/src/assets/icon-camera.png',
        iconSize: [40, 40]
      });
      //加载视频
      request.get("/api/camera/selectByGroupAndArea", {params: {areaCode: areaCode}})
        .then((resp) => {
          let cameras = resp.data.data;
          for(let i = 0; i < cameras.length; i++) {
            L.marker([cameras[i].latitude, cameras[i].longitude], {
              icon: cameraIcon,
            })
              .addTo(this.cameraLayers)
              .on('click', function() {
                alert('可以在这里控制视频播放' + cameras[i].deviceCode)
              });
          }
      });
    },
    getZoom() {
      let width = this.$refs.mapContainer.clientWidth;
      if (width < 600) {
        return 9;
      } else if (width < 2000) {
        return 10;
      } else {
        return 11;
      }
    },

    // 列表滚动方法
    autoScroll() {
      const el = document.querySelector("#tableList2");
      const elHeight = el.offsetHeight;
      const sHeight = el.scrollHeight;
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.timer = setInterval(() => {
        if (el.scrollTop < sHeight - elHeight) {
          el.scrollTop++;
        } else {
          el.scrollTop = 0;
        }
      }, 100);
    }
  }
}
</script>

<style scoped lang="less">
// 布局样式
.container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 20px 0;
}

.top {
  width: 100%;
  height: 62vh;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;

  .town,
  .map,
  .mas-neg {
    width: 33.3%;
  }
  .town {
    box-sizing: border-box;
    padding-right: 20px;
  }
  .map {

  }
  .mas-neg {
    .mas,
    .neg {
      height: 30vh;
      box-sizing: border-box;
      padding-left: 20px;
    }
    .mas {
      margin-bottom: 2vh;
    }
  }
}
.bottom {
  width: 100%;
  height: 22vh;
}

// 表格样式
.line {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  div {
    text-align: center;
  }
}
.lineColor {
  background-color: #2a64b1;
}

.circle-box {
  display: flex;
  justify-content: center;
}

.circle {
  width: 21px;
  height: 21px;
  background-image: url('@/assets/circle.png');
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}


// 当日各乡采集情况列表
.tow-box {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .town-item {
    padding: 14px 0;
    border-radius: 5px;
    margin-bottom: 10px;
    width: 95%;
    display: flex;
    align-items: center;
    background: rgba(52, 152, 232, 0.5);

    .no {
      margin-left: 20px;
    }

    img {
      margin-left: 18px;
      margin-right: 23px;
    }

    .towm-desc {
      margin-right: 40px;
      span {
        font-size: 14px;
        font-weight: 400;
        color: #FFFFFF;
        opacity: 0.7;
      }

      .town-name {
        font-size: 14px;
        font-weight: 500;
        color: #FFFFFF;
        margin-top: 10px;
      }
    }

    .town-info {
      height: 50px;
      display: flex;
      flex-wrap: wrap;
      width: 60%;

      .town-info-item {
        width: 50%;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 400;
        opacity: 0.7;

        .circles {
          width: 4px;
          height: 4px;
          background: #00EAFF;
          border-radius: 50%;
          display: block;
          margin-right: 5px;
        }
        .town-content {
          color: #FFFFFF;
          display: flex;
          align-items: center;

          text {
            color:#00EAFF;
          }
        }
      }
    }
  }
}


// 地图区样式
.tongji {
  width: 100%;
  height: 153px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url('@/assets/top-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
}

.date {
  margin-top: 5px;
  display: flex;
  align-items: center;
  img {
    margin-right: 10px;
  }

  text {
    font-size: 14px;
    font-weight: 500;
    color: #FFFFFF;
  }
}

.tongji-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  width: 90%;
}

.tongji {
  margin-bottom: 10px;
}

.tongji-info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tongji-icon {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 800;
  color: #FFFFFF;
  text-shadow: 0px 2px 3px rgba(4,79,154,0.96);
  width: 80px;
  height: 80px;
  background-image:url('@/assets/circle-bg.png');
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tongji-count {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #00EAFF;

  text {
    color: #FFFFFF;
    font-size: 12px;
  }
}

// 地图区弹窗样式
.map-box {
  position: relative;
  .modal {
    width: 484px;
    height: 204px;
    background-image: url('@/assets/modal.png');
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: -20px;
    right: -50px;
    z-index: 999;

    .modal-box {
      width: 77%;
      margin: 0 auto;
      margin-top: 60px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .modal-item {
        width: 50%;
        margin-bottom: 5px;
        display: flex;
        align-items: center;
        img {
          margin: 0;
          padding: 0;
        }
        span {
          display: flex;
          align-items: center;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #FFFFFF;

          text {
            font-size: 16px;
            color: #37FAC6;
          }
        }
      }
    }
  }
}

// 地图样式
#leaflet-map {
  height: 44vh;
  flex: 3;
}

.leaflet-container {
  background-color: transparent;
}

.layout-col {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.layout-col > div {
  display: flex;
  flex: 1;
}

.layout {
  flex: 3 !important;
  display: flex;
  flex-direction: row;
}
.layout > div {
  display: flex;
  flex: 1;
}
</style>

<style>
body .leaflet-control {
  opacity: 0.1;
}

body .marker-div-icon {
  width: 60px !important;
  height: 50px !important;
  background: url("../../assets/marker-1.png") no-repeat;
  background-size: 100% 100%;
  padding-top: 7px;
  text-align: center;
  color: #00f9ff;
}

body .marker-div-icon:hover {
  background: url("../../assets/marker-2.png") no-repeat;
  background-size: 100% 100%;
  color: #FCEE4F;
}

</style>
